<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline>
      <el-form-item prop="projectName">
        <el-select v-model="queryParams.param1" placeholder="请选择来源" style="width: 120px;" clearable>
          <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="progressChkType">
        <el-select v-model="queryParams.param2" placeholder="组织类型" style="width: 120px;" clearable>
          <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button icon="el-icon-refresh">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="来源" min-width="100">
        <template slot-scope="{ row }">
          {{ row.code }}
        </template>
      </el-table-column>
      <el-table-column label="所属类型" min-width="100">
        <template slot-scope="{ row }">
          {{ row.version }}
        </template>
      </el-table-column>
      <el-table-column label="考核内容" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组织类型" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.rtype }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分值" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" class-name="small-padding" min-width="100">
        <template slot-scope="{ row }">
          <!--<el-button type="primary" icon="el-icon-search">操作</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增" :visible.sync="addVisible" :close-on-click-modal="false" width="500px" append-to-body>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="检查项" name="first">
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="检查项版本" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查项" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="组织类型" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable  class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="分值" prop="projectId">
              <el-input v-model="form.num" placeholder="请输入"  class="form-item"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary">确 定</el-button>
              <el-button>取 消</el-button>
            </el-form-item >
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="标准" name="second">
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="标准" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查项" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="组织类型" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择" filterable clearable  class="form-item">
                <el-option v-for="project in Options" :key="project.value" :label="project.label" :value="project.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="分值" prop="projectId">
              <el-input v-model="form.num" placeholder="请输入"  class="form-item"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary">确 定</el-button>
              <el-button>取 消</el-button>
            </el-form-item >
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="录入得分" :visible.sync="addScores" :close-on-click-modal="false" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="结构安全" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="施工安全" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="防渗漏" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="工艺观感" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="材料及工序验收" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="样板先行" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="按图施工" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item label="文明施工" prop="projectId">
          <el-input v-model="form.num" placeholder="请输入得分"  class="form-item"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary">确 定</el-button>
          <el-button>取 消</el-button>
        </el-form-item >
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  filters: {

  },
  data() {
    return {
      queryParams: {
        param1: '',
        param2: ''
      },
      list: [
        { code: '检查项', version: '工程减分', type: '出现结构安全事故', rtype: '集团', num: '-23'},
        { code: '检查项', version: '工程加分', type: '交付优秀', rtype: '集群',  num: '+23'},
        { code: '标准', version: '关键工序', type: '出现重大偏离应及时重新召开策划会', rtype: '事业部',  num: '-23'},
        { code: '标准', version: '关键工序', type: '不得使用假货，弄虚作假', rtype: '分管集群',  num: '-23'}
      ],
      Options: [
        {label: '标题', value: '值'}
      ],
      form: {},
      rules: [],
      listLoading: false,
      addVisible: false,
      addScores: false,
      activeName: 'first'
    }
  },
  created() {

  },
  methods: {
    handleClick() {}
  }
}
</script>
<style>
  .form-item {
    width: 300px !important;
  }
</style>




